<template>
  <view class="healthService">
    <view class="title">精选健康服务</view>
    <view class="service-content">
      <template v-for="service in serviceList">
        <image
          :key="service.id"
          @tap="goToDetails(service.id)"
          :src="getMainImageUrl(service)"
          class="image"
        />
      </template>
    </view>
  </view>
</template>

<script lang="ts">
import "./index.less";
import Taro from "@tarojs/taro";
import { getMainImageUrl } from "../../../../../services/products-service";

export default {
  data() {
    return {};
  },
  props: {
    serviceList: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    goToDetails(productId) {
      Taro.navigateTo({
        url: `/pages/sales/details/index?productId=${productId}`,
      });
    },
    getMainImageUrl,
  },
};
</script>
